<template>
	<view class="coupon-item d-b-c" :class="'bg-' + (couponData?.color?.text || 'red')">
		<view class="side-line left-side-line"><text class="round" :style="{ background: itemData?.style?.background }"></text></view>
		<view class="side-line right-side-line"><text class="round" :style="{ background: itemData?.style?.background }"></text></view>
		<view class="center-content pr">
			<view class="content-top">
				<text class="coupon-item-unit">￥</text>
				<text class="coupon-item-discount">{{ couponData?.couponType == 2 ? couponData?.discountPrice : couponData?.discountMoney }}</text>
			</view>
			<view class="content-bottom tc">
				<view class="coupon-item-name text-ellipsis-2">{{ couponData?.name }}</view>
			</view>
		</view>
		<!--领取-->
		<view
			v-if="couponData?.have == 0"
			class="right-receive"
			@click="receive(couponData)">
			<view class="lr-tb">立即领取</view>
		</view>
		<view
			v-else 
			@click="receive(couponData)"
			class="right-receive no-receive">
			<view class="lr-tb">立即使用</view>
		</view>
	</view>
</template>

<script>
	export default {
		emits: ['receive'],
		props: {
			itemData: {
				type: Object,
				default: () => {}
			},
			couponData: {
				type: Object,
				default: () => {}
			}
		},
		created() {
		},
		methods: {
			/**
			 * 领取优惠券
			 */
			receive: function(couponData) {
				this.$emit('receive', couponData)
			}
		}
	}
</script>

<style lang="scss" scoped>
.coupon-item {
	width: 220rpx;
	height: 110rpx;
	color: #ffffff;
	flex-shrink: 0;
	margin-right: 20rpx;
	position: relative;
	border-radius: 8rpx;
	overflow: hidden;
	background-color: #FF4C01;
	color: #ffffff;
}

.coupon-item .left-type {
	padding: 4rpx 8rpx;
	font-size: 18rpx;
	line-height: 18rpx;
	text-align: center;
	position: absolute;
	right: 0;
	top: 0;
	color: #ffffff;
	background: linear-gradient(to right, #ff5b00, #fe8802);
	border-bottom-left-radius: 8rpx;
}

.left-side-line {
	position: absolute;
	width: 24rpx;
	top: -14rpx;
	right: 42rpx;
	overflow: hidden;
}

.right-side-line {
	position: absolute;
	width: 24rpx;
	bottom: -14rpx;
	right: 42rpx;
	overflow: hidden;
}

.side-line .round {
	display: block;
	width: 24rpx;
	height: 24rpx;
	border-radius: 50%;
}

.center-content::before {
	top: 0;
	right: -16rpx;
	border-radius: 0 0 15rpx 15rpx;
}

.coupon-item .center-content {
	padding: 0rpx 16rpx;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	flex: 1;
	height: 100%;
	box-sizing: border-box;
	color: #ffffff;
}

.coupon-item .center-content .content-top {
	height: 28rpx;
	line-height: 28rpx;
	text-align: center;
	margin-bottom: 8rpx;
	justify-content: center;
	align-items: center;
}

.coupon-item .center-content .content-datatime {
	padding: 4rpx 10rpx;
	border-radius: 30rpx;
	font-size: 20rpx;
	background: rgba(0, 0, 0, 0.2);
}

.coupon-item .right-receive {
	height: 112rpx;
	width: 52rpx;
	text-align: center;
	font-size: 18rpx;
	line-height: 20rpx;
	text-align: center;
	flex-shrink: 0;
	color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
	border-left: 1rpx dashed #ffffff;

	.lr-tb {
		width: 26rpx;
	}
}

.coupon-item .no-receive {
	background: #acacac !important;
	color: #ffffff;
}
.coupon-item-discount {
	font-size: 36rpx;
}
.coupon-item-unit {
	font-size: 24rpx;
}
.coupon-item-name {
	font-size: 20rpx;
	line-height: 28rpx;
}
</style>
